<template>
	<div class="login-wrap">
		<div class="register-form">
			<div class="logon-ins">
				<img :src="logo" alt />
				<!-- <p>{{ webName }}</p> -->
			</div>
			<el-form ref="temp" :rules="rules" :model="temp">
				<!-- <el-form-item label="部门" prop="deptId">
				  <UnitSelect @e-unitData="setUnitId" :selectType="1" :level="2" />
				</el-form-item>-->
				<el-form-item label prop="account">
					<div class="clearfix">
						<span class="icon el-icon-user fl"></span>
						<el-input class="fl" v-model="temp.account" @blur="handleBlur()" placeholder="请输入登陆账号"></el-input>
						<div class="accountHint fl">
							<span v-show="accountAali == 0" class="el-icon-question tpic color-info"></span>
							<span v-show="accountAali == 1" class="el-icon-success tpic color-success"></span>
							<span v-show="accountAali == 2" class="el-icon-error tpic color-danger"></span>
						</div>
					</div>
				</el-form-item>
				<el-form-item prop="userName">
					<span class="icon el-icon-user fl"></span>
					<el-input v-model="temp.userName" autocomplete="off" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-form-item prop="likeName">
					<span class="icon el-icon-office-building fl"></span>
					<el-input v-model="temp.likeName" placeholder="请输入单位"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<span class="icon el-icon-lock"></span>
					<el-input v-model="temp.password" show-password :placeholder="passwordTips" autocomplete="new-password"></el-input>
				</el-form-item>
				<el-form-item prop="confirmPassword">
					<span class="icon el-icon-lock"></span>
					<el-input v-model="temp.confirmPassword" show-password :placeholder="passwordTips2"></el-input>
				</el-form-item>
				<!-- <el-form-item label="性别" prop="sex">
          <template>
            <el-radio v-model="temp.sex" label="1">男</el-radio>
            <el-radio v-model="temp.sex" label="2">女</el-radio>
          </template>
        </el-form-item>-->

				<el-form-item style="text-align: center; margin-left: 0">
					<el-button class="regBut" @click="register('temp')">注册</el-button>
					<el-button type="text" @click="routeToByName('login')">去登录</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { tbUserVali } from '@/api/admin/user/user-manage.js';
import { sign } from '@/api/http';
import webinfo from '@/mixins/webinfo.js';
export default {
	mixins: [webinfo],
	name: 'login',
	components: {
		UnitSelect: () => import('@/components/unitSelect')
	},
	data() {
		// 重复密码验证
		const pwdAgainCheck = async (rule, value, callback) => {
			//这样才能在回调里通过箭头函数获取到this对象
			if (value != this.temp.password) {
				callback(new Error('与密码不一致'));
			} else {
				//校验通过
				callback();
			}
		};
		return {
			userinfo: {},
			accountAali: 0,
			temp: {
				account: '',
				password: '',
				userName: '',
				isLeader: '1',
				sex: '1',
				deptId: '',
				del: '2', //不可用，需审核
				// definitionCode: '',
				type: 40 //学员
			},
			rules: {
				account: [
					{ required: true, message: '请输入账号', trigger: 'blur' },
					{
						min: 2,
						max: 30,
						message: '请输入2~30个字符',
						trigger: 'blur'
					}
				],
				userName: [
					{ required: true, message: '请输入姓名', trigger: 'blur' },
					{
						min: 2,
						max: 8,
						message: '请输入2~8位汉字、字母或数字',
						trigger: 'blur'
						// validator: function (rule, value, callback) {
						//   //校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/
						//   if (/^[\u4e00-\u9fa5]{2,8}$/.test(value) == false) {
						//     callback(new Error("请输入2~8个汉字"));
						//   } else {
						//     //校验通过
						//     callback();
						//   }
						// },
						// trigger: "blur",
					}
				],
				password: [
					{
						required: true,
						message: '请输入6~16个字符',
						trigger: 'blur',
						min: 6,
						max: 16
					},
					{
						validator: function(rule, value, callback) {
							//校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/
							if ((value + '').length < 6) {
								callback(new Error('请输入6~16个字符'));
							} else {
								//校验通过
								callback();
							}
						},
						trigger: 'blur'
					}
				],
				confirmPassword: [
					{ required: true, message: '请输入确认密码', trigger: 'blur' },
					{
						validator: pwdAgainCheck,
						trigger: 'blur'
					}
				],
				deptId: [{ required: true, message: '请选择部门', trigger: 'blur' }]
			},

			webInfoId: '872916039618451191539bc394c39664',
			webInformationData: {},
			logoImgUrl: '',
			companyTableData: [],
			treeName: '',
			passwordTips: '请输入密码',
			passwordTips2: '请输入确认密码',
			treeFlag: false,
			defaultProps: {
				children: 'childList',
				label: 'name'
			}
		};
	},
	created() {
		//判断当前是否有网络
		if (!navigator.onLine) {
			this.$message({
				message: '当前无法连接到服务器，请检查网络',
				type: 'warning'
			});
		}
		this.getRegisterAudit();
	},
	methods: {
		async getRegisterAudit() {
			let res = await this.$store.dispatch('getDictionaryVal', 'REGISTER_AUDIT');
			this.temp.del = res[0];
		},
		setUnitId(v) {
			this.temp.deptId = v || '';
		},
		login() {
			const news = this.$router.resolve({ name: 'login' });
			window.open(news.href, '_blank');
		},
		resetForm(form) {
			this.$router.go(-1);
		},
		//注册按钮提交
		register(form) {
			this.$refs[form].validate(valid => {
				if (valid) {
					if (this.accountAali != 1) {
						this.$message({
							message: '请输入账号',
							type: 'warning'
						});
						return;
					}
					sign(this.temp).then(res => {
						if (res.data.code == 0) {
							if (this.temp.del == 2) {
								this.$message.success('已注册，请等待管理员审核');
								this.$router.push({ name: 'index' });
							} else {
								this.$message.success('注册成功，请登录');
								this.$router.push({ name: 'login' });
							}
						}
					});
				}
			});
		},
		handleBlur() {
			if (!this.temp.account) {
				this.accountAali = 0;
				return;
			}
			tbUserVali({ account: this.temp.account }).then(res => {
				if (res.data.msg == '0') {
					this.accountAali = 1;
				} else {
					this.accountAali = 2;
					this.$message({
						message: '账号已存在',
						type: 'error'
					});
				}
			});
		}
	}
};
</script>
<style>
.register-form .el-form-item__label,
.register-form .el-radio__label {
	color: #000;
}

.login-wrap .el-button--default {
	width: 195px;
}
.login-wrap .el-button--default.regBut {
	background: #043183;
	border-color: #043183;
	color: #ffffff;
	width: 100%;
	margin: 20px 0;
}
.register-form .el-form-item {
	margin-bottom: 17px;
}
</style>
<style scoped>
.login-wrap {
	height: 100%;

	background-size: 100% 100%;
}
.login-wrap .el-select {
	width: 100%;
}
.el-card {
	background-color: rgba(255, 255, 255, 0.8);
}
.login-wrap {
	width: 100%;

	display: flex;
}
.register-form {
	margin: auto;
	/* background-color: rgba(255, 255, 255, 0.1); */
	border: 0px;
}
.register-form .el-icon-arrow-down {
	position: absolute;
	right: 10px;
	top: 12px;
}
.login-title {
	margin-bottom: 20px;
	font-size: 36px;
	color: #f8da96;
	text-align: center;
	font-weight: normal;
	margin-top: 10px;
}
.register-form form.el-form {
	padding-top: 10px;
}
.accountHint {
	position: absolute;
	right: -30px;
	top: 0;
	font-size: 18px;
}
.logon-ins {
	margin-bottom: 30px;
}
.logon-ins img {
	display: block;
	margin: 0 auto;
}
.logon-ins p {
	text-align: center;
	margin-top: 24px;

	font-size: 24px;
	font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
	font-weight: bold;
}
.login-wrap >>> .el-input__inner {
	border: 1px solid transparent;
	border-bottom: 1px solid #d6d6d6;
	border-radius: 0;
}
.login-wrap >>> .el-input__inner {
	padding-left: 40px;
}

.el-form-item__content .clearfix {
	position: relative;
}

.login-wrap span.icon.el-icon-user.fl,
span.icon.el-icon-lock,
.el-icon-office-building {
	position: absolute;
	z-index: 2;
	font-size: 24px;
	top: 6px;
	color: #d6d6d6;
}
span.icon.el-icon-lock {
	position: absolute;
	z-index: 2;
}
.login-wrap >>> .el-form-item__error {
	padding-left: 40px;
}
</style>
